<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/echarts.min-5.4.0.js"></script>
</head>
<body>
    <div id="app">
        <div id="bar" ref="bar" style="width: 900px;height: 500px">

        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                xAxisdata:null,
                seriesdata:null
            },
            methods:{
                myechars(){
                    var myecharts = echarts.init(this.$refs.bar);

                    var option = {
                        xAxis: {
                            data: this.xAxisdata
                        },
                        yAxis: {},
                        series: [
                            {
                                type: 'bar',
                                data: this.seriesdata
                            }
                        ]
                    };

                    myecharts.setOption(option);
                },
                getbarlist(){
                    var uid = localStorage.getItem("uid");
                    axios.get('http://localhost:8080/bar/list?uid='+uid)
                        .then(response =>{
                            this.xAxisdata=response.data.names;
                            this.seriesdata=response.data.nums;
                            console.log(response.data);
                            this.myechars();
                        });
                }
            },
            mounted(){
               // this.myechars();
            },
            created:function (){
                this.getbarlist();
                // this.myechars();
            }

        })
    </script>
</body>
</html>